import _ from 'lodash';
import * as React from 'react';
import {observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Modal, Row, Col, Form, Tree} from 'antd';
import {checkStore, areaTreeStore} from '../AdStore';
import {AdTreeShow} from './components/treeShow/TreeShow';
import {SelectItem} from "../../../../component/select/SelectItemView";

declare let GLOBAL: any;

const FormItem = Form.Item;

const mediaTypeToContent = {
    '0': '图片',
    '1': '外部图片',
    '2': '富文本',
    '3': '纯文本'
}

@observer
export class AdShowModal extends React.Component<any, any> {
    render() {
        return (
            <Modal width="600"
                   title="查看广告"
                   maskClosable={true}
                   visible={checkStore.visible}
                   onCancel={() => {
                       checkStore.hide()
                   }}
                   footer="">
                <AdShowForm/>
            </Modal>
        )
    }
}

@observer
export class AdShowForm extends React.Component<any, any> {
    render() {
        const fields = checkStore.getValues();

        const formItemLayout = {
            labelCol: {span: 8},
            wrapperCol: {span: 16}
        };

        const formStyle = {
            marginBottom: '5px'
        }

        let showMediaType,
            mediaType = _.toString(fields.mediaType),
            content = fields.content;

        if (mediaType === '0') {
            showMediaType = (
                <FormItem label="图片:"
                          style={formStyle}
                          labelCol={{span: 4}}
                          wrapperCol={{span: 20}}>
                    <img style={{maxWidth: '300', maxHeight: '60'}}
                         src={`${GLOBAL.imageApiURL}/${content}`}/>
                </FormItem>
            )
        } else if (mediaType === '1') {
            showMediaType = (
                <FormItem label="外部图片:"
                          style={formStyle}
                          labelCol={{span: 4}}
                          wrapperCol={{span: 20}}>
                    <img style={{maxWidth: '300', maxHeight: '60'}}
                         src={`${content}`}/>
                </FormItem>
            )
        } else if (mediaType === '2') {
            showMediaType = (
                <FormItem label="内容:"
                          style={formStyle}
                          labelCol={{span: 4}}
                          wrapperCol={{span: 20}}>
                    <a href={`${GLOBAL.fileApiURL}/${fields.contentUrl}`} target="_blank">查看网页</a>
                </FormItem>
            )
        } else {
            showMediaType = (
                <FormItem label="文本:"
                          style={formStyle}
                          labelCol={{span: 4}}
                          wrapperCol={{span: 20}}>
                    <p style={{maxWidth: 400, wordWrap: 'break-word'}}>{content}</p>
                </FormItem>
            )
        }

        return (
            <div>
                {/*<Row type="flex">
                    <Col span={12}>
                        <FormItem label="业务方:"
                            style = {formStyle}
                            {...formItemLayout}>
                            {fields.businessUnitTitle}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem label="应用名称:"
                            style = {formStyle}
                            {...formItemLayout}>
                            {fields.appTitle}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <FormItem label="平台:"
                            style = {formStyle}
                            {...formItemLayout}>
                            {fields.platformTitle}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem label="页面:"
                            style = {formStyle}
                            {...formItemLayout}>
                            {fields.pageTitle}
                        </FormItem>
                    </Col>
                </Row>*/}
                {/*<Row type="flex" style={{
                    borderBottom:'1px solid #ddd',
                    marginBottom: 10
                }}>
                    <Col span={12}>
                        <FormItem label="广告位:"
                            style = {formStyle}
                            {...formItemLayout}>
                            {fields.positionTitle}
                        </FormItem>
                    </Col>
                </Row>*/}
                <Row type="flex">
                    <Col span={12}>
                        <FormItem label="起始日期:"
                                  style={formStyle}
                                  {...formItemLayout}>
                            {fields.beginDate}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem label="结束日期:"
                                  style={formStyle}
                                  {...formItemLayout}>
                            {fields.endDate}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={12}>
                        <FormItem label="标题:"
                                  style={formStyle}
                                  {...formItemLayout}>
                            {fields.title}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem label="类型:"
                                  style={formStyle}
                                  {...formItemLayout}>
                            {mediaTypeToContent[mediaType]}
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        {showMediaType}
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <FormItem label="API:"
                                  style={formStyle}
                                  labelCol={{span: 4}}
                                  wrapperCol={{span: 20}}>
                            {
                                _.map(fields.apiUrl, (item) => {
                                    return <p style={{maxWidth: 400, wordWrap: 'break-word'}}>{item}</p>
                                })
                            }
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <FormItem label="链接地址:"
                                  style={formStyle}
                                  labelCol={{span: 4}}
                                  wrapperCol={{span: 20}}>
                            <p style={{maxWidth: 400, wordWrap: 'break-word'}}>{fields.url}</p>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <FormItem label="标签:"
                                  style={formStyle}
                                  labelCol={{span: 4}}
                                  wrapperCol={{span: 20}}>
                            <p style={{
                                maxWidth: 400,
                                wordWrap: 'break-word'
                            }}>{(fields.tags as number[]).reduce((previousValue, currentValue, currentIndex, array) => {
								const tag = checkStore.fields.tags.option.find((value) => {
                                    return Number(value.id) === Number(currentValue);
                                }) || {name:''};
                                return `${previousValue}${currentIndex > 0 ? ' , ' : ''}${tag.name}`;
                            }, '')}</p>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col span={24}>
                        <FormItem label="广告区域:"
                                  style={formStyle}
                                  labelCol={{span: 4}}
                                  wrapperCol={{span: 20}}>
                            {
                                checkStore.visible ? <AdTreeShow store={checkStore}/> : null
                            }
                        </FormItem>
                    </Col>
                </Row>
            </div>
        )
    }
}